<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('Edit')">

</head>
<body>
    <!--navigator-->
    <nav th:replace="admin/_fragments :: admin_nav('home')"></nav>

    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="active teal item">Edit</a>
                <a href="#" class="item">List</a>
            </div>
        </div>
    </div>
    <!--main body-->
    <div class="my-padded-tb-l">
        <div class="ui container">
            <form id="blog-form" action="#" th:object="${blog}" th:action="@{/admin/blog}" method="post" class="ui form">
                <input type="hidden" name="id" th:value="*{id}">
                <input type="hidden" name="isPublished">
                <div class="required field">
                    <div class="ui left labeled input">
                        <div class="ui selection compact teal basic dropdown label">
                            <input type="hidden" value="original" name="flag" th:value="*{flag}">
                            <i class="dropdown icon"></i>
                            <div class="text">Original</div>
                            <div class="menu">
                                <div class="item" data-value="original">Original</div>
                                <div class="item" data-value="reproduce">Reproduce</div>
                                <div class="item" data-value="translate">Translate</div>
                            </div>
                        </div>
                        <input type="text" name="title" placeholder="title" th:value="*{title}">
                    </div>
                </div>
                
                <div class="required field">
<!--                        markdown editor-->
                    <div id="my-editormd" style="z-index: 1 !important;">
                        <textarea style="display: none;" name="content" th:text="*{content}"></textarea>
                    </div>
                </div>

                <div class="two fields">
                    <div class="required field">
                        <div class="ui left labeled action input">
                            <label class="ui compact teal basic label">Category</label>
                            <div class="ui fluid selection dropdown" id="category-dropdown">
                                <input type="hidden" name="category.id" th:value="*{category.id}">
                                <i class="dropdown icon"></i>
                                <div class="default text">Categroy</div>
                                <div class="menu">
<!--                                    <div class="item" data-value="1">Coding</div>-->
<!--                                    <div class="item" data-value="2">Thinking</div>-->
                                    <div th:each="category: ${category_list}" class="item" th:data-value="${category.id}" th:text="${category.name}"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left labeled action input">
                            <label class="ui compact teal basic label">Tag</label>
                            <div class="ui fluid selection multiple search dropdown" id="tag-dropdown">
                                <input type="hidden" name="tagIds" th:value="*{tagIds}">
                                <i class="dropdown icon"></i>
                                <div class="default text">Tag</div>
                                <div class="menu">
<!--                                    <div class="item" data-value="1">Java</div>-->
<!--                                    <div class="item" data-value="2">SpringBoot</div>-->
                                    <div th:each="tag: ${tag_list}" class="item" th:data-value="${tag.id}" th:text="${tag.name}"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="required field">
                    <div class="ui left labeled input">
                        <label for="coverPicture" class="ui teal basic label">Picture URL</label>
                        <input type="text" id="coverPicture" name="coverPicture" th:value="*{coverPicture}" placeholder="URL of picture">
                    </div>
                </div>
                <div class="inline fields">
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="isRecommended" name="isRecommended" checked th:checked="*{isRecommended}" class="hidden checked">
                            <label for="isRecommended">Recommend</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="hasCopyrightStatement" name="hasCopyrightStatement" checked th:checked="*{hasCopyrightStatement}" class="hidden">
                            <label for="hasCopyrightStatement">Copyright</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="canAppreciation" name="canAppreciation" checked th:checked="*{canAppreciation}" class="hidden">
                            <label for="canAppreciation">Appreciation</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="canComment" name="canComment" checked th:checked="*{canComment}" class="hidden">
                            <label for="canComment">Comment</label>
                        </div>
                    </div>
                </div>

                <div class="ui error message"></div>

                <div class="ui right aligned container">
                    <button type="button" class="ui button" onclick="window.history.go(-1)">Return</button>
                    <button type="button" id="save-btn" class="ui secondary button">Save</button>
                    <button type="button" id="publish-btn" class="ui teal button">Publish</button>
                </div>
            </form>
        </div>
        
    </div>

    <!--footer-->
    <footer th:replace="_fragments :: footer"></footer>
    <div th:replace="_fragments :: basic_scripts"></div>
    <script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>
    <script>

        // initial markdown editor
        var testEditor;
        $(function() {
            testEditor = editormd("my-editormd", {
                width   : "100%",
                height  : 640,
                syncScrolling : "single",
                path    : "/lib/editormd/lib/"
            });
        });

        $("#menu_toggle").click(function () {
            $('.my-menu-item').toggleClass('my-mobile-hide')
        });

        $('.ui.dropdown').dropdown();

        $('.ui.form').form({
            fields: {
                title: {
                    identifier: 'title',
                    rules: [{
                        type: 'empty',
                        prompt: 'Title: Please input blog title!'
                    }]
                },
                content: {
                    identifier: 'content',
                    rules: [{
                        type: 'empty',
                        prompt: 'Content: Please input blog content!'
                    }]
                },
                categoryId: {
                    identifier: 'category.id',
                    rules: [{
                        type: 'empty',
                        prompt: 'Category: Please choose blog category!'
                    }]
                },
                coverPicture: {
                    identifier: 'coverPicture',
                    rules: [{
                        type: 'empty',
                        prompt: 'CoverPicture: Please input picture url!'
                    }]
                }
            }
        })

        $('#save-btn').click(function () {
            $("[name='isPublished']").val(false);
            $("#blog-form").submit();
        });

        $('#publish-btn').click(function () {
            $("[name='isPublished']").val(true);
            $("#blog-form").submit();
        });

        $("#category-dropdown").dropdown({
            clearable: true,
            // apiSettings: {
            //     url: '/api/categories'
            // },
        });

        $("#tag-dropdown").dropdown({
            clearable: true,
            // apiSettings: {
            //     url: '/api/tags'
            // },
        });


        // $.ajaxSetup ({
        //     cache: false //unable AJAX cache
        // });
    </script>
</body>
</html>